<template>
  <div class="api" v-if="sortedItems.length">
    <w-card :title="title" title-class="green-light4--bg">
      <div v-if="title === 'Props'">
        <w-table
          :headers="propsHeaders"
          :items="sortedItems"
          select-row="select-row"
          @row-select="selectedRow = $event"
        ></w-table>
      </div>
      <div v-if="title === 'Slots'">
        <w-table
          :headers="slotsHeaders"
          :items="sortedItems"
          select-row="select-row"
          @row-select="selectedRow = $event"
        >
          <template #item="{ item, label, header, index }">
            <ul
              v-if="typeof label === 'object'"
              style="list-style: none; padding-left: 0; width: 480px"
            >
              <li v-for="it in Object.keys(label)">
                <div style="padding-left: 0; color: #ff6600">{{ it }} :</div>
                <small
                  style="padding-left: 8px"
                  class="grey mr2"
                  v-html="label[it]"
                ></small>
              </li>
            </ul>
            <div v-else>
              <div v-if="header.key === 'name'">
                <strong v-html="label"></strong>
              </div>
              <div v-else v-html="label"></div>
            </div>
          </template>
        </w-table>
      </div>
      <div v-if="title === 'Events'">
        <w-table
          :headers="eventsHeaders"
          :items="sortedItems"
          select-row="select-row"
          @row-select="selectedRow = $event"
        >
          <template #item="{ item, label, header, index }">
            <ul
              v-if="typeof label === 'object'"
              style="list-style: none; padding-left: 0; width: 480px"
            >
              <li v-for="it of Object.keys(label)">
                <div>
                  <div
                    style="
                      display: inline-block;
                      padding-left: 0;
                      color: #ff6600;
                    "
                    v-html="it"
                  ></div>
                  <span>:</span>
                </div>
                <small
                  style="padding-left: 8px"
                  class="grey mr2"
                  v-html="label[it]"
                ></small>
              </li>
            </ul>
            <div v-else>
              <div v-if="header.key === 'name'">
                <strong v-html="label"></strong>
              </div>
              <div v-else v-html="label"></div>
            </div>
          </template>
        </w-table>
      </div>
    </w-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        propsHeaders: [
          { label: "Name", key: "name" },
          { label: "Default", key: "default" },
          { label: "Type", key: "type" },
          { label: "Description", key: "description" },
        ],
        slotsHeaders: [
          { label: "Name", key: "name" },
          { label: "Params", key: "params" },
          { label: "Description", key: "description" },
        ],
        eventsHeaders: [
          { label: "Name", key: "name" },
          { label: "Params", key: "params" },
          { label: "Description", key: "description" },
        ],
      };
    },
    props: {
      items: { type: Object, required: true }, // The raw $props object from each component.
      descriptions: { type: Object, default: () => ({}) },
      title: { type: String },
    },

    computed: {
      // TODO: 该计算属性分为三个计算属性分别处理,并返回三个不同的数据,传给对应的table进行渲染
      sortedItems() {
        const keys = Object.keys(this.items).sort();
        let newItem = {};
        return keys.map((key) => {
          const item = { ...this.items[key] }; // Keep original intact.
          if (this.title === "Props") {
            if (!item.type) {
              item.type = ["Any"];
              item.default =
                item.default === undefined ? "undefined" : item.default;
            } else {
              item.type = Array.isArray(item.type)
                ? item.type.map((f) => f.name)
                : [item.type.name];
              if (item.type[0] === "Number")
                item.default = item.default === undefined ? "0" : item.default;
              else if (item.type[0] === "String")
                item.default = `'${item.default || ""}'`;
              else if (item.type[0] === "Boolean")
                item.default = item.default ? "true" : "false";
              else if (item.type[0] === "Array")
                item.default = item.default === undefined ? "[]" : item.default;
              else if (item.type[0] === "Object")
                item.default =
                  item.default === undefined ? "() => ({})" : item.default;
              else if (item.type[0] === "Function")
                item.default =
                  item.default === undefined ? "() => {}" : item.default;
            }

            newItem = {
              name: `<strong>${key
                .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
                .toLowerCase()}</strong>`,
              type: `<div style="color:#FF6600">${item.type}</div>`,
              default: `<div style="width:128px;margin:0 auto;">${item.default}</div>`,
              description: item.description,
            };
          } else if (this.title === "Slots") {
            newItem = { ...item };
          } else if (this.title === "Events") {
            newItem = { ...item };
          }
          return {
            name: key
              .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
              .toLowerCase(),
            ...newItem,
            hide:
              newItem.description === false || this.descriptions[key] === false,
            description: newItem.description || this.descriptions[key] || "",
          };
        });
      },
    },
  };
</script>

<style lang="scss">
  .api {
    margin-top: 5em;
    .w-table {
      strong {
        font-weight: 600;
        padding: 0 8px;
        display: block;
        width: 140px;
      }
      .w-table__cell[data-label="Description"] {
        padding: 10px 5px;
        line-height: 2.2rem;
      }
    }
  }
</style>
